<template>
  <div class="online_exaim">
    <el-container>
      <el-main style="min-width: 1000px">
        <el-card class="box-card">
          <h3>特种作业人员考核试题[建筑起重信号司索工] (80题)</h3>
          <el-form>
            <div class="font_w margin_bottom_10">第一部分、单项选择题</div>
            <el-form-item v-for="i in 10" :key="i">
              <div>单选题 1分</div>
              <div>{{ i }}.起重力矩不变，工作幅度减小，起重重量可()</div>
              <el-radio-group v-model="radioDanxuan">
                <el-radio label="A">A、减少</el-radio>
                <el-radio label="B">B、说不清</el-radio>
                <el-radio label="C">C、不变</el-radio>
                <el-radio label="D">D、增加</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="font_w margin_bottom_10">第二部分、判断题</div>
            <el-form-item v-for="i in 10" :key="i">
              <div>判断题 1分</div>
              <div>{{ i + 10 }}.汽车起重机的优点是:机动性好,转移迅速()</div>
              <el-radio-group v-model="radioPanduan">
                <el-radio label="A">A、对</el-radio>
                <el-radio label="B">B、错</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="font_w margin_bottom_10">第三部分、多项选择题</div>
            <el-form-item v-for="i in 10" :key="i">
              <div>多选题 2分</div>
              <div>{{ i + 20 }}.机械构件的受力变形情况归纳为下列几种形式()</div>
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="A">A.剪切</el-checkbox>
                <el-checkbox label="B">B.扭转</el-checkbox>
                <el-checkbox label="C">C.压缩</el-checkbox>
                <el-checkbox label="D">D.弯曲</el-checkbox>
                <el-checkbox label="E">E.拉伸</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
       <el-aside :width="showAside ? '0' : '260px'"></el-aside>
      <div class="userCard">
        <el-aside :width="showAside ? '0' : '260px'">
          <el-card class="box-card">
            <div class="padding_left_10 color_5C9DD4 bgc_F2F2F2 title_r_top">
              考生信息
            </div>
            <div class="main_name">
              <div class="main_name_top">姓名:胡坤明</div>
              <div class="main_name_bottom">身份证号:420124197701031210</div>
            </div>
            <div class="padding_left_10 color_5C9DD4 bgc_F2F2F2 title_r_main">
              试卷信息
            </div>
            <div class="main_exaim">
              <div class="main_exaim_top">考试时长:563分钟</div>
              <div class="main_exaim_bottom">剩余时间:127:31:11</div>
            </div>
            <div class="padding_left_10 color_5C9DD4 bgc_F2F2F2 title_r_answer">
              <div class="title_r_answerl">答题卡</div>
              <div class="title_r_answerr">答题率:0.00%</div>
            </div>
            <div class="main_answer">
              <el-row>
                <el-col :span="4" v-for="i in 80" :key="i">{{ i }}</el-col>
              </el-row>
            </div>
            <div class="position_answer" @click="showAside = !showAside">
              答题卡
            </div>
          </el-card>
        </el-aside>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "online_exaim",
  data() {
    return {
      //控制右边侧边栏是否显示
      showAside: false,
      radioDanxuan: "",
      radioPanduan: "",
      checkList:[],
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.online_exaim {
  // height: 100vh;
  // background: #dcf2fd;
  .el-container {
    height: 100%;
    .el-main {
      padding: 0 90px;
      h3 {
        text-align: center;
        color: #5c9dd4;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
      }
      .el-form {
        .el-form-item {
          ::v-deep.el-form-item__content {
            line-height: 26px;
          }
          .el-radio-group {
            .el-radio {
              display: block;
              margin-bottom: 6px;
            }
          }
          .el-checkbox-group{
            .el-checkbox{
              display: block;
              margin-bottom: 6px;
            }
          }
        }
      }
    }
    .el-aside {
      position: relative;
      overflow: unset;
      background: none;
      padding: 0;
      .el-card {
        ::v-deep.el-card__body {
          padding: 0;
        }
        .title_r_top {
          height: 34px;
          line-height: 34px;
        }
        .main_name {
          height: 50px;
          margin-bottom: 3px;
          font-size: 14px;
          padding: 0 11px;
          line-height: 23px;
          color: #80ac6a;
          background-color: #dcf0d7;
          // .main_name_top {
          //   color: #80AC6A;
          //   background-color: #DCF0D7;
          // }
          // .main_name_bottom{
          //   color: #80AC6A;
          //   background-color: #DCF0D7;
          // }
        }
        .title_r_main {
          height: 34px;
          line-height: 34px;
        }
        .main_exaim {
          height: 50px;
          margin-bottom: 3px;
          font-size: 14px;
          padding: 0 11px;
          line-height: 23px;
          color: #5c9dd4;
          background-color: #d8ecf3;
        }
        .title_r_answer {
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 10px;
          .title_r_answerr {
            color: #ffff;
            background-color: #7fac6e;
            font-size: 14px;
            padding: 0 10px;
            border-radius: 18px;
          }
        }
        .main_answer {
          padding-top: 10px;
          .el-row {
            .el-col {
              width: 32px;
              height: 32px;
              margin: 0 0 10px 10px;
              color: #fff;
              text-align: center;
              line-height: 32px;
              background-color: #ccc;
            }
          }
        }
      }
      .position_answer {
        position: absolute;
        left: -20px;
        top: 280px;
        width: 20px;
        height: 80px;
        line-height: 25px;
        color: #5c9dd4;
        cursor: pointer;
        background-color: #f2f2f2;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
    }
  }
  .userCard {
    position: fixed;
    top: 5px;
    right: 0;
  }
}
.font_w {
  font-weight: 700;
}
.padding_left_10 {
  padding-left: 10px;
}
.color_5C9DD4 {
  color: #5c9dd4;
}
.bgc_F2F2F2 {
  background-color: #f2f2f2;
}
.margin_bottom_10 {
  margin-bottom: 10px;
}
</style>
